<template>
  <!-- 获取用户姓名的对话框 -->
  <el-dialog
    :title="$t('common.customer_name')"
    width="65%"
    :modal="false"
    @close="closeDialog"
    @open="openDialog"
  >
    <el-card
      shadow="never"
      style="border: 0px"
      :body-style="{ padding: '0px' }"
      :current-page="pageNo"
      :page-size="pageSize"
      :total="totalCount"
      @current-change="handleCurrentChange"
    >
      <el-form class="p-4" inline>
        <el-form-item>
          <el-input
            ref="name"
            v-model="condition"
            clearable
            class="inputModify"
            :placeholder="$t('common.name_id')"
            @clear="clearSearch"
            @keyup.enter.native="getKeyId()"
          ></el-input
        ></el-form-item>
        <el-form-item>
          <el-checkbox v-model="includeDemo" border @change="getKeyId">{{
            $t("common.include_demo")
          }}</el-checkbox></el-form-item
        >
        <el-form-item>
          <el-button type="primary" class="w-8" @click="getKeyId()">
            <svg-icon icon-class="search" class="text-lg" /> </el-button
        ></el-form-item>
      </el-form>
      <el-table ref="customerData" height="608" :data="customerData">
        <!-- <el-table-column property="keyId" :label="$t('common.customer_id')" width="120" align="center" /> -->
        <el-table-column property="name" :label="$t('common.customer_name')" />
        <el-table-column label="OID">
          <template v-slot="scope">
            <div>
              <el-tooltip placement="top-start">
                <template #content>
                  <div style="max-width: 300px; line-height: 160%">
                    <span>{{ scope.row.oid }}</span>
                  </div></template
                >
                <div>
                  {{ scope.row.oidSimple }}
                </div>
              </el-tooltip>
            </div>
          </template>
        </el-table-column>
        <el-table-column property="oaId" :label="$t('common.oa_id')" />
        <el-table-column property="oaName" :label="$t('common.oa_name')" />

        <el-table-column
          key="shortName"
          property="shortName"
          :label="$t('common.short_name')"
        />
        <!--        <el-table-column key="address" property="address" :label="$t('common.address')" />-->
        <!--        <el-table-column key="linkMan" property="linkMan" :label="$t('common.link_man')" />-->
        <!--        <el-table-column key="mobile" property="mobile" :label="$t('common.mobile')" />-->
        <el-table-column key="email" property="email" :label="$t('common.email')" />

        <el-table-column width="120" align="center">
          <template v-slot="scope">
            <el-button type="primary" size="small" @click="confirmSelect(scope.row)">{{
              $t("common.confirm")
            }}</el-button>
          </template>
        </el-table-column>
      </el-table>
    </el-card>
  </el-dialog>
</template>
<script>
import { getUserKeyId } from "@/api";
export default {
  data() {
    return {
      customerListVisible: false,
      pageNo: 1,
      pageSize: 10,
      totalCount: 0,
      customerData: [],
      condition: "",
      includeDemo: false,
      form: "",
    };
  },
  methods: {
    closeDialog() {
      this.$emit("update:model-value", false);
    },
    openDialog() {
      this.getKeyId();
    },
    clearSearch() {
      this.condition = "";
      this.getKeyId();
    },
    handleCurrentChange(val) {
      this.pageNo = val;
      this.getKeyId();
    },
    getKeyId() {
      const params = {
        characterCode: "OPERATOR",
        pageSize: this.pageSize,
        pageNo: this.pageNo,
        condition: this.condition,
        includeDemo: this.includeDemo,
      };
      getUserKeyId(params)
        .then((res) => {
          this.totalCount = res.total;
          this.customerData = res.list;
          for (let i = 0; i < this.customerData.length; i++) {
            this.customerData[i]["choose"] = false;
            if (this.customerData[i].oid != null) {
              const len = this.customerData[i].oid.length;
              const temp = this.customerData[i].oid + "";
              this.customerData[i].oidSimple =
                temp.substring(0, 8) + "..." + temp.substring(len - 8, len);
            }
          }
        })
        .catch((err) => {
          this.$message.error(err.message);
        });
    },
    confirmSelect(detail) {
      this.$emit("update:model-value", false);
      this.$emit("confirmSelect", detail);
      this.condition = "";
    },
  },
};
</script>
